import { ReactNode, useEffect, useState } from "react";
import { PrePageSvg, SimpleAppSvg } from "../assets/CustomizeSvg";
import { isLoggedIn } from "@/service/axiosManager";
import { getApplicationList } from "@/service/request/requestApi";
import { ResponseModal } from "@/service/request/modal/responseModal";
import { ApplicationData } from "@/service/request/modal/dataModal";
import { message } from "antd";

import "./chatview.css"
import MessageMain from "./MessageMain";
import { UtilHelpers } from "@/service/general/utils/utilHelpers";

const ChatView = ({callback}: {callback: (param?: any) => void}) => {
    const [applicationList, setApplicationList] = useState<ApplicationData[]>([]);
    const [loadData, setLoadData] = useState<boolean>(true);
    const [activeItem, setActiveItem] = useState<ApplicationData>({...applicationList[0]});
    const [sessionModel, setSessionModel] = useState<ReactNode>(<></>);

    useEffect(() => {
        init();
    });

    const init = () => {
        if (isLoggedIn() && loadData) {
            setLoadData(false);
            loadApplication();
        }
    }

    const loadApplication = () => {
        getApplicationList().then((res: ResponseModal<ApplicationData>) => {
            if (res.code === 0 && res.success) {
                const result = res.result || [];
                setApplicationList([...result]);
                switchActive({...result[0]});
            } else if (res.message && res.message.length > 0) {
                message.error(res.message);
            }
        }).catch((err) => {
            console.log("获取列表失败", err);
        });
    }

    const switchActive = (item: ApplicationData) => {
        if (isActive(item)) return;
        UtilHelpers.CleanTimeout("Process-msg");
        ShowMessageMain(item);
        setActiveItem({...item});
    }

    const isActive = (item: ApplicationData) => {
        return item.id === activeItem.id;
    }

    const ShowMessageMain = (item: ApplicationData) => {
        const model = <MessageMain appInfo={item} />
        setSessionModel(model);
    }

    return (
        <>
            <div className="w-full h-full bg-transparent text-black">
                <div className="w-full h-full flex flex-row items-center justify-center bg-transparent">
                    <div className="flex-1 h-full flex flex-col items-center justify-start py-1 border-r border-r-gray-300">
                        <div className="w-full h-fit border-b border-b-zinc-300 px-4 py-3">
                            <div className="w-full h-fit flex flex-row items-center justify-start gap-2 rounded-lg cursor-pointer px-4 py-2 hover:bg-gray-200" onClick={callback}>
                                <div className="w-9 flex flex-row items-center justify-center rounded-full p-1 text-blue-500 bg-white rotate-180"><PrePageSvg width={`100%`} height={`100%`} /></div>
                                <div className="text-base">退出聊天</div>
                            </div>
                        </div>
                        <div className="w-full flex-grow min-h-0 flex flex-col items-stretch justify-center py-2">
                            <div className="py-2 px-4 text-zinc-500">应用列表</div>
                            <div className="scrollbar-style w-full flex-grow px-4 overflow-y-auto">
                                <div className="w-full h-fit flex flex-col items-center justify-center gap-3">
                                    {
                                        applicationList?.map((item, index) => (
                                            <>
                                                <div key={`app_list_${item.id}_${index}`}
                                                className={`w-full flex flex-row items-center justify-start gap-3 rounded-lg shadow-sm shadow-transparent cursor-pointer px-4 py-2 ${isActive(item) ? "bg-white text-blue-600 shadow-blue-500/70": "hover:bg-gray-200"}`}
                                                onClick={() => switchActive(item)}
                                                >
                                                    <div className="w-6 p-1 rounded-md bg-blue-400/80 text-white"><SimpleAppSvg width={`100%`} height={`100%`} /></div>
                                                    <div>{item.name}</div>
                                                </div>
                                            </>
                                        ))
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="flex-[7] h-full flex flex-row">
                        {sessionModel}
                    </div>
                </div>
            </div>
        </>
    );
}

export {
    ChatView
}